Skip to content

feature(react-utilities): support for data-* attributes on slots#31754

Draft
bsunderhus wants to merge 8 commits intomicrosoft:masterfrom
bsunderhus:react-utilities/feature--support-for-data---attributes
Draft

feature(react-utilities): support for data-* attributes on slots#31754
bsunderhus wants to merge 8 commits intomicrosoft:masterfrom
bsunderhus:react-utilities/feature--support-for-data---attributes

Conversation

@bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Jun 18, 2024 •
edited
Loading

Previous Behavior

New Behavior

  1. uses a distributive version of Pick (DistributivePick) (as suggested here [Bug]: slot cannot be passed a data-* attribute #27302 (comment)) to ensure that we reduce the amount of keys being evaluated while mutating types, that way we can avoid TS error TS2590 (Expression produces a union type that is too complex to represent)
  2. updates components accordingly
  3. updates every internal types that create mutations to also follow distributive patterns, to ensure modification per member unit

⚠️⚠️ This implementation requires a TS version of ^4.5

This PR relies on the modifications provided by react v18 adoption PR #31548

Related Issue(s)

@bsunderhus bsunderhus self-assigned this Jun 18, 2024
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 18, 2024
@bsunderhus bsunderhus changed the title React-utilities/feature--support-for-data---attributes feature(react-utilities): support for data-* attributes on slots Jun 18, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 18, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 85 87 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 631 658 5000
Button mount 301 305 5000
Field mount 1114 1134 5000
FluentProvider mount 727 702 5000
FluentProviderWithTheme mount 85 87 10 Possible regression
FluentProviderWithTheme virtual-rerender 40 34 10
FluentProviderWithTheme virtual-rerender-with-unmount 79 73 10
MakeStyles mount 863 855 50000
Persona mount 1772 1675 5000
SpinButton mount 1398 1443 5000
SwatchPicker mount 1643 1673 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 18, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 99.097 kB
30.197 kB		 99.144 kB
30.214 kB		 47 B
17 B
react-avatar
Avatar		 49.301 kB
15.838 kB		 49.347 kB
15.859 kB		 46 B
21 B
react-avatar
AvatarGroup		 20.107 kB
7.973 kB		 20.153 kB
7.992 kB		 46 B
19 B
react-avatar
AvatarGroupItem		 63.445 kB
20.061 kB		 63.491 kB
20.082 kB		 46 B
21 B
react-badge
Badge		 25.952 kB
8.614 kB		 25.999 kB
8.633 kB		 47 B
19 B
react-badge
CounterBadge		 26.731 kB
8.887 kB		 26.778 kB
8.902 kB		 47 B
15 B
react-badge
PresenceBadge		 25.719 kB
9.485 kB		 25.765 kB
9.494 kB		 46 B
9 B
react-breadcrumb
@fluentui/react-breadcrumb - package		 113.657 kB
31.532 kB		 113.697 kB
31.551 kB		 40 B
19 B
react-button
Button		 37.105 kB
10.785 kB		 37.144 kB
10.796 kB		 39 B
11 B
react-button
CompoundButton		 43.516 kB
12.076 kB		 43.556 kB
12.092 kB		 40 B
16 B
react-button
MenuButton		 41.886 kB
12.133 kB		 41.925 kB
12.149 kB		 39 B
16 B
react-button
SplitButton		 49.898 kB
13.725 kB		 49.939 kB
13.737 kB		 41 B
12 B
react-button
ToggleButton		 53.032 kB
12.545 kB		 53.072 kB
12.554 kB		 40 B
9 B
react-card
Card - All		 100.845 kB
28.873 kB		 100.891 kB
28.9 kB		 46 B
27 B
react-card
Card		 93.629 kB
27.077 kB		 93.675 kB
27.081 kB		 46 B
4 B
react-card
CardFooter		 14.356 kB
5.798 kB		 14.402 kB
5.816 kB		 46 B
18 B
react-card
CardHeader		 16.879 kB
6.664 kB		 16.925 kB
6.68 kB		 46 B
16 B
react-card
CardPreview		 14.42 kB
5.934 kB		 14.467 kB
5.951 kB		 47 B
17 B
react-checkbox
Checkbox		 35.105 kB
12.112 kB		 35.158 kB
12.13 kB		 53 B
18 B
react-combobox
Combobox (including child components)		 100.436 kB
33.139 kB		 100.488 kB
33.163 kB		 52 B
24 B
react-combobox
Dropdown (including child components)		 101.069 kB
33.081 kB		 101.121 kB
33.094 kB		 52 B
13 B
react-components
react-components: Button, FluentProvider & webLightTheme		 69.141 kB
20.157 kB		 69.18 kB
20.168 kB		 39 B
11 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 211.741 kB
60.957 kB		 211.815 kB
61 kB		 74 B
43 B
react-components
react-components: FluentProvider & webLightTheme		 44.442 kB
14.607 kB		 44.488 kB
14.626 kB		 46 B
19 B
react-components
react-components: entire library		 1.093 MB
270.372 kB		 1.093 MB
270.398 kB		 112 B
26 B
react-datepicker-compat
DatePicker Compat		 223.007 kB
63.137 kB		 223.026 kB
63.155 kB		 19 B
18 B
react-dialog
Dialog (including children components)		 98.908 kB
29.807 kB		 98.954 kB
29.836 kB		 46 B
29 B
react-divider
Divider		 21.328 kB
7.965 kB		 21.375 kB
7.986 kB		 47 B
21 B
react-field
Field		 23.384 kB
8.903 kB		 23.43 kB
8.925 kB		 46 B
22 B
react-image
Image		 15.362 kB
6.248 kB		 15.408 kB
6.264 kB		 46 B
16 B
react-input
Input		 27.987 kB
9.446 kB		 28.039 kB
9.467 kB		 52 B
21 B
react-label
Label		 14.672 kB
6.002 kB		 14.718 kB
6.019 kB		 46 B
17 B
react-link
Link		 17.193 kB
6.993 kB		 17.239 kB
7.01 kB		 46 B
17 B
react-menu
Menu (including children components)		 151.246 kB
45.708 kB		 151.319 kB
45.745 kB		 73 B
37 B
react-menu
Menu (including selectable components)		 153.932 kB
46.201 kB		 154.005 kB
46.24 kB		 73 B
39 B
react-message-bar
MessageBar (all components)		 24.413 kB
9.117 kB		 24.46 kB
9.133 kB		 47 B
16 B
react-persona
Persona		 56.192 kB
17.728 kB		 56.238 kB
17.745 kB		 46 B
17 B
react-popover
Popover		 127.198 kB
39.776 kB		 127.244 kB
39.802 kB		 46 B
26 B
react-progress
ProgressBar		 17.086 kB
6.906 kB		 17.132 kB
6.922 kB		 46 B
16 B
react-provider
FluentProvider		 24.618 kB
8.906 kB		 24.664 kB
8.926 kB		 46 B
20 B
react-radio
Radio		 32.673 kB
10.351 kB		 32.719 kB
10.373 kB		 46 B
22 B
react-radio
RadioGroup		 15.76 kB
6.433 kB		 15.807 kB
6.454 kB		 47 B
21 B
react-select
Select		 27.638 kB
10.108 kB		 27.693 kB
10.129 kB		 55 B
21 B
react-slider
Slider		 37.17 kB
12.547 kB		 37.216 kB
12.566 kB		 46 B
19 B
react-spinbutton
SpinButton		 36.049 kB
11.835 kB		 36.101 kB
11.857 kB		 52 B
22 B
react-spinner
Spinner		 25.246 kB
8.554 kB		 25.293 kB
8.573 kB		 47 B
19 B
react-swatch-picker
@fluentui/react-swatch-picker - package		 103.495 kB
30.046 kB		 103.542 kB
30.063 kB		 47 B
17 B
react-switch
Switch		 35.301 kB
11.348 kB		 35.347 kB
11.368 kB		 46 B
20 B
react-table
DataGrid		 160.297 kB
45.656 kB		 160.343 kB
45.683 kB		 46 B
27 B
react-table
Table (Primitives only)		 42.482 kB
13.868 kB		 42.547 kB
13.902 kB		 65 B
34 B
react-table
Table as DataGrid		 131.102 kB
36.346 kB		 131.167 kB
36.377 kB		 65 B
31 B
react-table
Table (Selection only)		 70.336 kB
20.028 kB		 70.401 kB
20.063 kB		 65 B
35 B
react-table
Table (Sort only)		 68.979 kB
19.633 kB		 69.044 kB
19.67 kB		 65 B
37 B
react-tag-picker
@fluentui/react-tag-picker - package		 180.139 kB
54.231 kB		 180.191 kB
54.256 kB		 52 B
25 B
react-tags
InteractionTag		 15.167 kB
6.135 kB		 15.214 kB
6.151 kB		 47 B
16 B
react-tags
Tag		 28.996 kB
9.52 kB		 29.042 kB
9.537 kB		 46 B
17 B
react-tags
TagGroup		 82.084 kB
24.34 kB		 82.131 kB
24.357 kB		 47 B
17 B
react-text
Text - Default		 17.063 kB
6.733 kB		 17.109 kB
6.746 kB		 46 B
13 B
react-text
Text - Wrappers		 20.235 kB
7.064 kB		 20.281 kB
7.083 kB		 46 B
19 B
react-textarea
Textarea		 26.521 kB
9.741 kB		 26.574 kB
9.762 kB		 53 B
21 B
react-timepicker-compat
TimePicker		 103.427 kB
34.598 kB		 103.473 kB
34.613 kB		 46 B
15 B
react-toast
Toast (including Toaster)		 97.525 kB
29.326 kB		 97.582 kB
29.349 kB		 57 B
23 B
react-tooltip
Tooltip		 54.558 kB
19.23 kB		 54.604 kB
19.249 kB		 46 B
19 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
328 B
global-context
createContextSelector		 537 B
339 B
react-calendar-compat
Calendar Compat		 149.583 kB
39.839 kB
react-jsx-runtime
Classic Pragma		 1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime		 3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime		 4.377 kB
1.881 kB
react-motion
@fluentui/react-motion - createMotionComponent()		 4.1 kB
1.828 kB
react-motion
@fluentui/react-motion - createPresenceComponent()		 4.767 kB
2.112 kB
react-motion
@fluentui/react-motion - PresenceGroup		 1.714 kB
819 B
react-overflow
hooks only		 12.821 kB
4.813 kB
react-portal
Portal		 14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider		 8.39 kB
2.64 kB
react-positioning
usePositioning		 26.489 kB
9.552 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against a2abb23cef53dd16a1d112c25f7a762737e5dd03

fabricteam
fabricteam reviewed Jun 18, 2024
View reviewed changes
change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Jun 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.basic - Dark Mode.normal.chromium.png 0 Added
Avatar Converged.basic.normal.chromium.png 0 Added
Card Converged - Interactive 9 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged - Interactive.appearance interactive - Subtle - High Contrast.click.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Subtle - High Contrast.hover.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Subtle - High Contrast.normal.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Filled - Dark Mode.click.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Filled - Dark Mode.hover.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Filled - Dark Mode.normal.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Filled - High Contrast.click.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Filled - High Contrast.hover.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Filled - High Contrast.normal.chromium.png 0 Removed
SwatchPicker Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
SwatchPicker Converged.default.default.chromium.png 0 Added

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@Mitch-At-Work Mitch-At-Work Awaiting requested review from Mitch-At-Work Mitch-At-Work will be requested when the pull request is marked ready for review Mitch-At-Work is a code owner

@mainframev mainframev Awaiting requested review from mainframev mainframev will be requested when the pull request is marked ready for review mainframev is a code owner

@ValentinaKozlova ValentinaKozlova Awaiting requested review from ValentinaKozlova ValentinaKozlova will be requested when the pull request is marked ready for review ValentinaKozlova is a code owner

@chpalac chpalac Awaiting requested review from chpalac chpalac will be requested when the pull request is marked ready for review chpalac is a code owner

@dmytrokirpa dmytrokirpa Awaiting requested review from dmytrokirpa dmytrokirpa will be requested when the pull request is marked ready for review dmytrokirpa is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@bsunderhus bsunderhus

Labels

Area: Typescript Fluent UI react-components (v9) Package: utilities

Projects

None yet

Milestone

April Project Cycle Q1 2024

Development

Successfully merging this pull request may close these issues.

[Bug]: slot cannot be passed a data-* attribute

2 participants

@bsunderhus @fabricteam